import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { getVideoItemDeduct, filterMonth } from '../lib/publicMethod'
import { IVideoData } from '../interface/IVideoData'

interface IProps {
  data: IVideoData[]
}
export default function VideoProportionChange(props: IProps) {
  const data = props.data
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    //扣分项变化趋势
    const itemDeductAveByMonth = [
      getVideoItemDeduct(filterMonth(data, '七月')).ave,
      getVideoItemDeduct(filterMonth(data, '八月')).ave,
      getVideoItemDeduct(filterMonth(data, '九月')).ave,
      getVideoItemDeduct(filterMonth(data, '十月')).ave,
      getVideoItemDeduct(filterMonth(data, '十一月')).ave,
      getVideoItemDeduct(filterMonth(data, '十二月')).ave,
    ]
    const progressArr: number[] = []
    const flowArr: number[] = []
    const contentArr: number[] = []
    const otherArr: number[] = []
    const videoArr: number[] = []
    for (let i = 0; i < itemDeductAveByMonth.length; i++) {
      progressArr.push(itemDeductAveByMonth[i][0])
      flowArr.push(itemDeductAveByMonth[i][1])
      contentArr.push(itemDeductAveByMonth[i][2])
      otherArr.push(itemDeductAveByMonth[i][3])
      videoArr.push(itemDeductAveByMonth[i][4])
    }
    (ec.current as echarts.ECharts).setOption({
      legend: {
        data: [
          '课程进度和顺序是否符合大纲',
          '是否按照授课流程上课',
          '授课内容是否符合大纲',
          '教学中存在的其他问题',
          '视频质量'
        ]
      },
      xAxis: {
        data: ['七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        max: 12
      },
      series: [
        {
          name: '课程进度和顺序是否符合大纲',
          type: 'bar',
          data: progressArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '是否按照授课流程上课',
          type: 'bar',
          data: flowArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '授课内容是否符合大纲',
          type: 'bar',
          data: contentArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '教学中存在的其他问题',
          type: 'bar',
          data: otherArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '视频质量',
          type: 'bar',
          data: videoArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
      ]
    });
  }, [data])
  return (
    <div className="show" ref={el}></div>
  )
}
